<template>
  <Icon v-if="iconType === 'icon'" :icon="name" />
  <svg v-else aria-hidden="true">
    <use :xlink:href="`#svg-${name}`" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'
import { Icon } from '@iconify/vue'
defineOptions({
  name: 'SvgIcon',
})
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})
const iconType = computed(() => {
  if (props.name.indexOf('i-') === 0 || props.name.includes(':')) {
    return 'icon'
  } else {
    return 'svg'
  }
})
</script>
